<template>
	<div>
		<div style="height: 10px;"></div>
		<div style="width: 100%;height: 100%;padding:0 20px; margin-top: 10px;">
			<!-- <el-card> -->
			<div style="display: flex;justify-content: space-around;">
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #e4ecff;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #4d7cfe;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/11.png" alt="" />
							</div>
						</div>
						<div class="boxN">

							<div class="tetx">网申测评</div>
							<div class="nums">{{topData.appraisalCount}}</div>
						</div>

					</div>
				</el-card>
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #fff3e0;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #ffab2b;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/12.png" alt="" />
							</div>
						</div>
						<div class="boxN">
							<div class="tetx">缴费金额(元)</div>
							<div class="nums">{{topData.paymentAmount}}</div>

						</div>

					</div>
				</el-card>
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #ffeaf4;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #ff85c0;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/13.png" alt="" />
							</div>
						</div>
						<div class="boxN">
							<div class="tetx">人岗匹配</div>
							<div class="nums">
								{{topData.userinfoCount}}
							</div>

						</div>

					</div>
				</el-card>
			</div>

			<div style="height: 10px;"></div>
			<div style="display: flex;justify-content: space-around;">
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #eaf9e1;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #6dd230;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/14.png" alt="" />
							</div>
						</div>
						<div class="boxN">
							<div class="tetx">AI简历定制</div>
							<div class="nums">
								{{topData.aiCustomization}}
							</div>

						</div>

					</div>
				</el-card>
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #f1e4ff;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #b37feb;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/15.png" alt="" />
							</div>
						</div>
						<div class="boxN">
							<div class="tetx">用户数量</div>
							<div class="nums">{{topData.wechatUserCount}}</div>

						</div>

					</div>
				</el-card>
				<el-card style="width:32%;">
					<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
						<div
							style="background-color: #e4ecff;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
							<div
								style="background-color: #4d7cfe;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
								<img style="width: 30px;height: 30px;" src="../assets/images/16.png" alt="" />
							</div>
						</div>
						<div class="boxN">
							<div class="tetx">岗位数量</div>
							<div class="nums">{{topData.jobCount}}</div>

						</div>

					</div>
				</el-card>
			</div>

			<!-- </el-card> -->

			<div style="margin-top: 10px;margin-left:8px;margin-right: 8px;">
				<el-card>
					<div style="display: flex;justify-content: space-between;align-items: center;padding: 10px;">
						<div style="font-weight: 700;">套餐购买趋势</div>
						<div>
							<div style="display: flex; align-items: center;margin-right: 2%;">
								<div
									style="width: 18rem;height: 40px; display: flex;border: 0.0625rem solid #4799ff;overflow: hidden;color: #4799ff;line-height: 40px;">
									<div class="tabs" :class="oneind == 'day' ? 'activee' : ''"
										@click="onetabBtn('day')">今日</div>
									<div class="tabs" :class="oneind == 'week' ? 'activee' : ''"
										@click="onetabBtn('week')">本月</div>
									<div class="tabs" :class="oneind == 'year' ? 'activee' : ''"
										@click="onetabBtn('year')">本年度</div>
									<div class="tabs" :class="oneind == 'mount' ? 'activee' : ''"
										@click="onetabBtn('mount')">自定义</div>
								</div>
								<div style="margin-left: 10px;" v-if="oneind == 'mount'">
									<el-date-picker v-model="value1" type="monthrange" range-separator="至" clearable
										start-placeholder="开始日期" end-placeholder="结束日期" @change="pickChange">
									</el-date-picker>
								</div>
							</div>
						</div>
					</div>
					<div  v-loading="loading">
						<div id="banjielv" style="width: 100%;height: 500px;"></div>
					</div>
				</el-card>
			</div>
			<div style="height: 20px;"></div>
		</div>
	</div>
</template>

<script>
	import {
		homePage,
		syZxTu
	} from "@/api/all/userApi";
	import * as echarts from 'echarts'
	require('echarts/theme/macarons')
	export default {
		data() {
			return {
				value1: '',
				oneind: 'day',
				oneform: {
					day: 1, //0本月，1上月
					startTime: null, // 开始时间
					endTime: null //
				},
				topData:{},
				zheList:[],
				loading: false
			}
		},
		created() {
			this.gethomePage()
			this.gtesyZxTu()
			
		},
		methods: {
			gethomePage(){
				homePage().then(res=>{
					console.log(res,'resssshomePage');
					this.topData = res.data
				})
			},
			gtesyZxTu(){
				this.loading = true
				syZxTu(this.oneform).then(res=>{
					console.log(res,'折线图数据');
					this.zheList = res.data.dayList
					this.$nextTick(() => {
						this.getbanjielv()
						this.loading = false
					})
				})
			},
			getbanjielv() {
				const myChart = echarts.init(document.getElementById('banjielv'))
				var option = {
					color: ['#5087ec', '#68bbc4', '#58a55c', '#f2bd42','#b37feb'],
					title: {},
					tooltip: {
						trigger: 'axis',
						// formatter:(data) =>{
						// 	return  data[0].name + '办结率' + data[0].value + '%'
						// }
					},
					legend: {
						data: ['AI雷达', 'AI智囊', 'AI军师', 'vip至尊','一对一指导'],
						show: true,
						// textStyle: {
						// 	color: "#fff"
						// }
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						// feature: {
						// 	saveAsImage: {}
						// }
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.zheList[0].dayList,
						axisLine: { //这是x轴文字颜色
						},
						axisLabel: {
							// rotate: 45, 
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}次',
						},
						axisLine: { //这是x轴文字颜色

						}
					},
					series: [{
							name: 'AI雷达',
							type: 'line',
							data: this.zheList[0].countList
						},
						{
							name: 'AI智囊',
							type: 'line',
							data: this.zheList[1].countList
						},
						{
							name: 'AI军师',
							type: 'line',
							data: this.zheList[2].countList
						},
						{
							name: 'vip至尊',
							type: 'line',
							data: this.zheList[3].countList
						},
						{
							name: '一对一指导',
							type: 'line',
							data: this.zheList[4].countList
						},
					]
				};
				myChart.setOption(option);
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			onetabBtn(i) {
				console.log(i, 'i');
				this.value1 = ''
				this.oneind = i
				this.oneform.startTime = ''
				this.oneform.endTime = ''
				if (i == 'day') {
					this.oneform.day = 1
					this.gtesyZxTu()
				} else if (i == 'week') {
					this.oneform.day = 2
					this.gtesyZxTu()
				} else if (i == 'year') {
					this.oneform.day = 3
					this.gtesyZxTu()
				} else {
					this.oneform.day = 4
				}

				

				console.log(this.oneform, 'this');
			},
			// one
			pickChange(e) {
				console.log(e, 'epicker');
				if (e) {
					this.oneform.startTime = this.parseTime(e[0], '{y}-{m}')
					this.oneform.endTime = this.parseTime(e[1], '{y}-{m}')
					this.gtesyZxTu()
				} else {
					this.oneform.startTime = ''
					this.oneform.endTime = ''
				}
				
				console.log(this.oneform, 'this.oneform');
			},
		}
	}
</script>

<style lang="scss">
	.activee {
		background-color: #4799ff !important;
		color: #fff !important;
		// border-radius: 10px;
		overflow: hidden;
	}

	.tabs {
		background-color: #fff;
		// padding: 6px 15px;
		flex: 1;
		text-align: center;
	}

	.flex {
		display: flex;
		align-items: center;

		.col-left {
			margin-right: 25px;
			font-size: 24px;
			color: #4799ff;

			.icon-body {
				width: 58px;
				height: 58px;
				border-radius: 50%;
				background-color: #eff6ff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.card-flex {
		display: flex;
		align-items: center;
		padding: 20px 0;

		// color: #fff;
		.boxN {
			// margin-top: 20px;
		}

		.tetx {
			margin-bottom: 8px;
			color: #767575;
			font-size: 15px
		}

		.nums {
			font-size: 20px;
			color: #000;
			// font-weight: 700;
		}
	}

	// .tabs {
	// 	background-color: #fff;
	// 	color: #259eff;
	// 	padding: 5px 15px;
	// }

	.active {
		// background-color: #259eff;
		// color: #fff;
		border: 1px solid #259eff;
		border-radius: 20px;
	}

	.el-card__body {
		padding: 5px 6px 6px 6px;
	}
</style>